<!--
 * @Author: 清羽
 * @Date: 2022-08-22 15:15:20
 * @LastEditTime: 2022-08-25 15:03:12
 * @LastEditors: you name
 * @Description: 
-->
<!-- addStepsTwo 页 -->
<template>
  <div
    class="addStepsTwo"
    v-loading="loading"
  >
    <el-upload
      :file-list="fileList"
      action
      :http-request="handleUploadFile"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :with-credentials='true'
    >
      <i class="el-icon-plus"></i>
      <div
        class="el-upload__tip"
        slot="tip"
        style="font-weight: bold"
      >
        建议尺寸大小为192*128,大小不超过2M,图片不超过4张
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <el-image
        width="100%"
        height="500px"
        :src="dialogImageUrl"
        fit="contain"
      ></el-image>
    </el-dialog>

    <el-button
      style="margin-top: 12px;"
      @click="previous"
      icon="el-icon-arrow-left"
    >上一步</el-button>
    <el-button
      style="margin-top: 12px;"
      type="primary"
      @click="next"
    >下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </div>
</template>

<script>

import { getProductPic, uploadProductPic, delProductPic } from "@/api/business/product"

export default {
  name: "addStepsTwo",
  data () {
    return {
      productId: this.$route.query.productId,
      fileList: [],
      dialogImageUrl: '',
      baseUrl: this.$baseUrl,
      dialogVisible: false,
      loading: true,
      // 照片墙
      upload: {
        // // 设置上传的请求头部
        // headers: {
        //   "Cookie": 'asd',
        //   "content-type": "application/x-www-form-urlencoded",
        // },
        // // 上传的地址
        name: "product_pic",

        // url: process.env.BACKGROUND_APPLICATION_URL + '/business/product/pic/upload',
        url: this.$baseUrl + '/api' + '/business/product/pic/upload',

        data: { productId: this.$route.query.productId }
      }
    }
  },
  props: {
    active: Number
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getProductPic()
  },
  computed: {
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    getProductPic () { // 获取图片素材列表
      const query = { productId: this.productId }
      getProductPic(query).then(res => {
        this.fileList = []
        const imgList = res.data.data
        for (let i = 0; i < imgList.length; i++) {
          this.fileList.push({
            'uid': imgList[i]._id,
            'url': this.$baseUrl + imgList[i].product_pic_path
          })
        }
        this.loading = false
      })
    },
    // 重写文件上传方法
    async handleUploadFile (params) {
      const file = params.file
      // 使用FormData传参数和文件
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("product_pic", file);
      form.append("productId", this.productId)
      console.log("product_pic => ", form.get("product_pic"))
      console.log("productId => ", form.get("productId"))
      await uploadProductPic(form).then(res => {
        if (res.data.msg == "操作成功") {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        }
      })
    },
    handlePictureCardPreview (file) { // 查看图片
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove (file, fileList) { // 删除
      console.log("handleRemove => fileList", fileList)
      const picId = file.uid
      console.log("handleRemove => picId", picId)
      this.$confirm('是否确认删除此图片?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = { picId }
        const del = await delProductPic(data) // 请求删除api
        if (del.data.msg == "操作成功") {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message.error(del.data.msg)
        }

      }).catch(() => { // 取消
        this.$message('已取消删除');
        this.getProductPic()
      })
    },
    // 上一步
    previous () {
      this.$emit('active', 0)
    },
    // 下一步
    next () {
      this.$emit('active', 2)
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.addStepsTwo {
}
</style>